<template>
  <view class="bind-account">
    <mt-navbar :title="title"></mt-navbar>
    <view class="login-top pt-48rpx">
      <image class="login-icon" src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-logo.svg"></image>
      <view class="login-title">让人脉变现-助力万商兴</view>
    </view>
    <view class="px-32rpx mt-72rpx">
      <uv-form ref="bindAccountFormRef" label-position="left" :rules="rules" :model="bindInfo">
        <uv-form-item prop="userInfo.phone">
          <uv-input v-model="bindInfo.userInfo.phone" placeholder="请输入手机号" border="bottom" maxlength="11"> </uv-input>
        </uv-form-item>
        <uv-form-item class="mt-32rpx" prop="userInfo.verifyCode">
          <view class="w-100%" style="position: relative">
            <uv-input v-model="bindInfo.userInfo.verifyCode" placeholder="验证码" border="bottom" maxlength="6"> </uv-input>

            <view class="wrap" style="position: absolute; right: 0; top: 0">
              <uv-toast ref="toast"></uv-toast>
              <uv-code ref="codeRef" :seconds="seconds" @end="end" @start="start" @change="codeChange"></uv-code>
              <view class="text-28rpx text-1C213E pr-40rpx mt-32rpx" @click="getCode">{{ tips }}</view>
            </view>
          </view>
        </uv-form-item>
      </uv-form>
    </view>
    <view class="px-32rpx mt-72rpx">
      <mt-button v-if="type === '6'" class="mt-38rpx w-100%" :shake="false" style="border-radius: 192rpx" @click="handleNext">确定注销</mt-button>
      <mt-button v-else class="mt-38rpx w-100%" :shake="false" style="border-radius: 192rpx" @click="handleNext">绑定</mt-button>
    </view>
    <mt-modal ref="logoffRef">
      <view>注销后账户将无法登录,是否确认注销?</view>
    </mt-modal>
  </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { sendVerifyCode, bindPhoneApp } from '@/api/login.js';
import { phoneCheck } from '@/utils/regular.js';
import { logoff } from '@/api/index.js';

const seconds = ref(60);
const bindAccountFormRef = ref(null);
const tips = ref('获取验证码');
const bindFlag = ref(false);
const type = ref(undefined);
const codeRef = ref(null);
const logoffRef = ref(null);

const title = ref('新用户注册');

const bindInfo = ref({
  userInfo: {
    phone: undefined,
    verifyCode: undefined,
    tempCode: undefined,
    regionCode: undefined
  }
});

const rules = ref({
  'userInfo.phone': [
    {
      type: 'string',
      required: true,
      message: '请输入手机号码',
      trigger: ['blur', 'change']
    },
    {
      validator: (rule, value, callback) => {
        return phoneCheck(value);
      },
      message: '请输入正确的手机号',
      trigger: ['blur']
    }
  ],
  'userInfo.verifyCode': {
    type: 'string',
    required: true,
    message: '请输入验证码',
    trigger: ['blur', 'change']
  }
});

const start = () => {};

const end = () => {};

const codeChange = (text) => {
  tips.value = text;
};

const getCode = () => {
  bindAccountFormRef.value.validateField('userInfo.phone', async (err) => {
    if (err && err.length) {
      return false;
    } else if (codeRef.value.canGetCode && bindInfo.value.userInfo.phone !== 'undefined') {
      uni.showLoading({
        title: '正在获取验证码'
      });
      uni.hideLoading();
      codeRef.value.start();
      const params = {
        phone: bindInfo.value.userInfo.phone,
        codeType: type.value === '1' ? 3 : type.value === '2' ? 4 : type.value === '6' ? 6 : 2
      };
      const { code, data } = await sendVerifyCode(params);
      if (code === 200) {
        uni.showToast({
          title: '发送成功',
          icon: 'none'
        });
      }
    } else {
      // uni.$uv.toast('倒计时结束后再发送');
    }
  });
};

// 下一步
const handleNext = () => {
  bindAccountFormRef.value.validate().then(async (res) => {
    if (res) {
      if (type.value === '6') {
        const options = {
          cancelText: '我再想想',
          confirmText: '确认注销',
          slot: true,
          title: '系统提示',
          success: async (e) => {
            if (e.confirm) {
              await logoff(bindInfo.value.userInfo);
              uni.showToast({
                title: '注销成功',
                icon: 'none'
              });
              uni.reLaunch({
                url: '/pages/login/phoneQuick'
              });
            }
          }
        };
        logoffRef.value.open(options);
      } else if (type.value === '1') {
        // 绑定微信账户
        const params = JSON.parse(JSON.stringify(bindInfo.value.userInfo));
        params.wechatTempCode = params.tempCode;
        const { code } = await bindPhoneApp(params);
        if (code === 200) {
          uni.showToast({
            title: '登录成功',
            inco: 'none'
          });
          uni.reLaunch({
            url: '/pages/index/index'
          });
        }
      } else if (type.value === '2') {
        // 绑定苹果账户
        const params = JSON.parse(JSON.stringify(bindInfo.value.userInfo));
        params.appleTempCode = params.tempCode;
        const { code } = await bindPhoneApp(params);
        if (code === 200) {
          uni.showToast({
            title: '登录成功',
            inco: 'none'
          });
          uni.reLaunch({
            url: '/pages/index/index'
          });
        }
      }
    }
  });
};

onLoad((data) => {
  type.value = data.type;
  if (!data.type) {
    title.value = '新用户注册';
  } else if (data.type === '6') {
    title.value = '注销账户';
  } else {
    // type 1 绑定账户
    title.value = '绑定账户';
    bindInfo.value.userInfo.tempCode = data.tempCode;
    bindInfo.value.userInfo.regionCode = data.regionCode;
  }
});
</script>

<style lang="scss" scoped>
.bind-account {
  min-height: 100vh;
  background: #fff;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  .login-top {
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    align-items: center;
    .login-icon {
      width: 342rpx;
      height: 134rpx;
    }
    .login-title {
      font-weight: 400;
      font-size: 24rpx;
      padding-top: 15rpx;
      color: #727687;
    }
  }
}
:deep(.uv-input__content__field-wrapper__field) {
  padding: 17rpx 0;
}
:deep(.uv-form-item__body__right__message) {
  margin-left: 8rpx !important;
}
</style>
